<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />

		<link rel="stylesheet" type="text/css" href="css/swiper.3.1.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/skin.css" />
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/queryloader2.min.js"></script>
		<script src="js/swiper.3.1.2.jquery.min.js"></script>
	</head>
<style>
		body{position:relative;}
		</style>
	<body>
		<div class=" view_body">
		
			<div class="bg"></div>
			<div class="imgView">
				<div class="swiper-container" id="real">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div>
								<img src="img/p1.jpg" />																								
							</div>														
						</div>
						<div class="swiper-slide">
							<div><img src="img/p1.jpg" /></div>
						</div>
						<div class="swiper-slide">
							<div><img src="img/p1.jpg" /></div>
						</div>
						<div class="swiper-slide">
							<div><img src="img/p1.jpg" /></div>
						</div>
						<div class="swiper-slide">
							<div><img src="img/p1.jpg" /></div>
						</div>
					</div>
				</div>
			</div>
			<div class="index_content">

				<div class="xk_cover">
					<img src="img/xk.png" />
				</div>
				<div class="rule">
					<a href="javascript:void(0);" id="r_button">奖品&活动规则>></a>
				</div>
				<div class="title">					
					<img src="img/title2.png" />
					
					<div class="butter1">
				        <div class="butterfly1">
				        	<img src="img/butterfly1.png" />        	
				        </div>
				    </div>
					
				</div>
			
				<div class="swiper-button-next iconfont icon-right"></div>
				<div class="swiper-button-prev iconfont icon-left"></div>
				<div class="detail">
					<div class="image_info">
						<div class='h'><span class="n">NO.101</span><span class="z"><i class="iconfont icon-iconfontxin"></i>0</span></div>
						<div>一句话介绍照片（140字内）</div>
					</div>
					<div class="total">共计<em>1000</em>票，目前排名<em>第100名</em></div>
					<div class="buttons">
						<a href="">点击晒图</a><a href="" id="ranking">查看前200名</a>
					</div>
					<div class="ad">
						
						<div class="butter3">
					        <div class="butterfly3">
					        	<img src="img/butterfly3.png" />
					        </div>
					    </div>	
						
						准现房新品11月面世
						<br/>前庭后园跃层墅，单价700元/m2米起
						<br/>交2万诚意登记中
					</div>
				</div>
				
				
				
				
			</div>

		</div>
		<div class="cover-box" id="gz_" style="display: none;">
			<div class="gz_">
				<h2>活动规则</h2>
				<p><em>活动时间：</em>2015年11月6日8:00—11月13日24:00</p>

				<p><em>领奖地点：</em>中国•成都•南三环一段 成龙路四海公园旁四海逸家售楼部</p>

				<p><em>咨询电话：</em>028-8031 1333</p>

				<p><em>参与方式：</em></p>

				<p>1、长按图片，识别图中二维码，关注“四海逸家”微信公众号。</p>
<img src="img/c.jpg" style=""/>				<p>2、猛戳屏幕下方按钮【晒萌宝靓照】，上传自家萌宝靓照（最多6张照片），就送最高100元微信现金红包，由于系统原因红包到账时间会有延迟，部分用户由于自身并未开通微信红包功能或红包功能被腾讯屏蔽等原因，尚不能接收红包。</p>
				<p>3、分享朋友圈邀请好友点赞，集赞前10名，可领取香港迪士尼乐园家庭套票；集赞前100名，可获得自家萌宝专属台历。</p>
				<p>4、集赞前100名客户11月14日到现场参加抽奖活动，还有机会赢取神秘大奖。</p>
				<p>5、中奖后凭借本人微信号，到四海逸家售楼部领奖（中奖事宜请提前电话咨询）。</p>
				<p>6、本活动最终解释权归四海逸家所有。</p>

			</div>
		</div>
		
		<div class="cover-paih" id="phb" style="display: none;">
			<div class="pop-paih">
				<div class="pop-close">
					<b></b>
				</div>
				<div class="paih-content">
					<table>
						<tr class="title">
							<td>名次</td>
							<td>投票数</td>
							<td>头像</td>
							<td>微信昵称</td>
						</tr>
						<tr>
							<td>1</td>
							<td>345</td>
							<td><img src="img/a.jpg" alt="a" /></td>
							<td>llll888</td>
						</tr>
						<tr>
							<td>2</td>
							<td>325</td>
							<td><img src="img/a.jpg" alt="a" /></td>
							<td>llll888</td>
						</tr>
						<tr>
							<td>3</td>
							<td>311</td>
							<td><img src="img/a.jpg" alt="a" /></td>
							<td>llll888dsfdsssssssssssssssssssssssssssssssssssssssssssssssss</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/media.mp3" loop controls></audio>
		</div>
			<img id="IMG" src="img/header.jpg"  class="header"/>
		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 500,
				fadeOutTime: 1000,
				onComplete: function() {
					var swiper = new Swiper('#real', {
						slidesPerView: 1,
						paginationClickable: true,
						nextButton: '.swiper-button-next',
						prevButton: '.swiper-button-prev',
						spaceBetween: 30,
						loop: true,
						autoplay: 3000
					});
					$("#r_button").bind("click",function(){
						$("#gz_").show();
					});
					$(".cover-box").bind("click",function(){
						$(this).hide();
					});
					
					$("#ranking").bind("click",function(){
						$("#phb").show();
					});
					$("#phb").bind("click",function(){
						$(this).hide();
					});
					
				}
			});
			
			$(function(){
				var audio = document.getElementById("media");
				audio.play();
					$(".audioControl").bind("click", function() {
						if ($(this).hasClass("play")) {
							$(this).removeClass("play");
							$(this).addClass("stop");
							audio.pause();
						} else {
							$(this).removeClass("stop");
							$(this).addClass("play");
							audio.play();
						}
					});
			});
		</script>
	</body>

</html>